<template>
  <div>
    <Card>
      <div class="drag-box-card">
        <!-- 切记设置list1和list2属性时，一定要添加.sync修饰符 -->
        <drag-list
          :list1.sync="list1"
          :list2.sync="list2"
          :dropConClass="dropConClass"
          @on-change="handleChange"
        >
          <h3 slot="left-title">待办事项</h3>
          <Card class="drag-item" slot="left" slot-scope="left">
            {{ left.itemLeft.name }}
          </Card>
          <h3 slot="right-title">完成事项</h3>
          <Card class="drag-item" slot="right" slot-scope="right">
            {{ right.itemRight.name }}
          </Card>
        </drag-list>
      </div>
      <div class="handle-log-box">
        <h3>操作记录</h3>
        <div class="handle-inner-box">
          <p v-for="(item, index) in handleList" :key="`handle_item_${index}`">
            {{ item }}
          </p>
        </div>
      </div>
      <div class="res-show-box">
        <pre>{{ list1 }}</pre>
      </div>
      <div class="res-show-box">
        <pre>{{ list2 }}</pre>
      </div>
    </Card>
  </div>
</template>

<script>
import DragList from "_c/drag-list";
export default {
  name: "drag_list_page",
  components: {
    DragList,
  },
  data() {
    return {
      list1: [],
      list2: [],
      dropConClass: {
        left: ["drop-box", "left-drop-box"],
        right: ["drop-box", "right-drop-box"],
      },
      handleList: [],
    };
  },
  methods: {
    handleChange({ src, target, oldIndex, newIndex }) {
      this.handleList.push(`${src} => ${target}, ${oldIndex} => ${newIndex}`);
    },
  },
  mounted() {
    this.$apis.base.getDragList().then((res) => {
      this.list1 = res.data;
      this.list2 = [res.data[0]];
    });
  },
};
</script>

<style lang="less">
.drag-box-card {
  display: inline-block;
  width: 600px;
  height: 560px;
  .drag-item {
    margin: 10px;
  }
  h3 {
    padding: 10px 15px;
  }
  .drop-box {
    border: 1px solid #eeeeee;
    height: 455px;
    border-radius: 5px;
  }
  .left-drop-box {
    margin-right: 10px;
  }
}
.handle-log-box {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #eeeeee;
  vertical-align: top;
  width: 200px;
  height: 500px;
  h3 {
    padding: 10px 14px;
  }
  .handle-inner-box {
    height: ~"calc(100% - 44px)";
    overflow: auto;
    p {
      padding: 14px 0;
      margin: 0 14px;
      border-bottom: 1px dashed #eeeeee;
    }
  }
}
.res-show-box {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #eeeeee;
  vertical-align: top;
  width: 350px;
  height: 570px;
}
</style>